<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英雄列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #1a2128;
        }

        .big {
            width: 1200px;
            position: relative;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;

        }

        .top {
            width: 100%;
            height: 600px;
            background-image: url(./星之守护者.jpg);
            background-size: 100% 600px;
        }

        input {
            width: 250px;
            height: 30px;
            position: absolute;
            left: 50%;
            margin-left: -100px;
            background-color: transparent;
            border: 1px solid saddlebrown;
            margin-top: 10px;
        }

        li {
            list-style: none;
        }

        ul li {
            width: 180px;
            height: 180px;
            margin-top: 60px;
            margin-left: 15cpx;
            color: white;
            border: 1px solid #282a3c;
            float: left;
            text-align: center;
            transition: all .5s;
        }

        ul li:hover {
            transform: translate(0, -10px);
        }

        ul li img {
            width: 100%;
            height: 150px;
            border-bottom: 1px solid #282a3c;
        }

        .mtk {
            width: 600px;
            height: 600px;
            background-color: white;
            position: absolute;
            left: 300px;
            right: 0;
            top: 100px;
            bottom: 0;
            /* display: none; */
        }

        .mtk p {
            font-size: 20px;
            margin: 25px;
        }

        .xia {
            width: 100%;
            border-top: 1px solid #666;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="top"></div>
        <p><input type="text" placeholder="检索"></p>
        <ul>
            <!-- <li>
                <img src="./angel.gif" alt=""><br>
                <span>angel</span>
            </li> -->
        </ul>
        <div class="mtk">
            <p>不灭狂雷沃利贝尔 <span style="float: right;">×</span></p>
            <div class="xia">
                <div style="display: flex;">
                    <img src="./angel.gif" alt="" style="width: 200px;height: 200px; margin : 20px;">
                    <div>
                        <p class="da" style="width: 280px;">
                        <p style="width: 100%; background-color: aqua; font-size: 15px;">攻击</p>
                        </p>
                        <p class="da" style="width: 280px;">
                        <p style="width: 100%; background-color: rgb(144, 190, 27); font-size: 15px;">防御</p>
                        </p>
                        <p class="da" style="width: 280px;">
                        <p style="width: 50%; background-color: rgb(175, 18, 31); font-size: 15px;">魔法</p>
                        </p>
                        <p class="da" style="width: 280px;">
                        <p style="width: 10%; background-color: rgb(27, 156, 72); font-size: 15px;">难度</p>
                        </p>
                    </div>
                </div>
                <div>
                    <p>拥有危险夺命的能力，却长着一幅小大人儿的可爱模样，这就是掌握深不可测占火魔法的女孩--安妮。安妮生活在诺克萨斯北边的山脚下，但即便是在这种地方，她也依然是魔法师中的异类。她与火焰的紧密关系与生俱来--最初那些火焰是伴随着喜怒无常的冲动情绪出现的，后来她学会了如何掌握这些“好玩的小把戏”。其中，安妮最喜欢的就是她召唤亲爱的泰迪熊提伯斯--那头狂野的守护火兽。如今安妮已经迷失在了永恒的天真里，她在黑暗森林中游荡，寻觅着能陪自己玩耍的人。
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./axios.min.js"></script>
<script>
    var ul = document.querySelector('ul')
    function xr() {
        axios.get('https://hmajax.itheima.net/api/lol/search').then(res => {
            var arr = res.data.data
            var brr = arr.map((ele, index) => {
                return `
            <li>
                <img src="${ele.icon}" alt=""><br>
                <span>${ele.title}</span>
            </li>
            `
            }).join('')
            ul.innerHTML = brr

        })
    }
    xr()

</script>